<%--
  Created by IntelliJ IDEA.
  User: zhaoyang
  Date: 2020/8/7
  Time: 4:46 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>

<div  style="float: left">
    <label class="control-label">案例图片</label>
    <label class="btn btn-primary">选择图片
        <input type="file"  onchange="viewImage(this)"/>
    </label>
    <p class="help-block">建议尺寸88*88</p>
</div>
<div id="localImag"><img id="preview" style="diplay:none" /></div>


<script>
    //上传图片后预览图片
    function viewImage(file){
        var preview = document.getElementById('preview');
        if(file.files && file.files[0]){
            //火狐下
            preview.style.display = "block";
            preview.style.width = "300px";
            preview.style.height = "120px";
            preview.src = window.URL.createObjectURL(file.files[0]);
        }else{
            //ie下，使用滤镜
            file.select();
            var imgSrc = document.selection.createRange().text;
            var localImagId = document.getElementById("localImag");
            //必须设置初始大小
            localImagId.style.width = "250px";
            localImagId.style.height = "200px";
            try{
                localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                locem("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
            }catch(e){
                alert("您上传的图片格式不正确，请重新选择!");
                return false;
            }
            preview.style.display = 'none';
            document.selection.empty();
        }
        return true;
    }
</script>

</body>
</html>
